Search box is essential part of blog or websites, Today we will discuss Top 10 stylish search box widget for blogger.Among them some are with Houver effect but other are simple but stylish. Hope this search box will make you happy after added on your blogger post.
Why search box is important blog ?
Search box in your blog is essential to search your content among all posts ,which makes viewers easier to find out the specific content what they want. It helps time consumption to user by using search box rather than finding mannualy.Search box are user convient and might chance to increase traffic flow on your blog .
All blogger want to apply sandard matching search box on their blog but due to lack of coding idea they can not apply matching search box on their blog. So these search box might be helpful for those professional blogger who wants to add matching search box on their template.
Custom search box for blog
Only adding a search box on your blog is not enough ,it might be stylish,matching and ease for user that meas user friendly.Blogger platform already provide defult search box on each template but which might not be enough and its looks ugly if you dont custom search box as per your theme.So all professional blogger customize search box widget as per their choice ,which gives good looking and user friendly to use. If defult search box doesnot work properly under your blog then dont worry just pick any one codes as per your choice and apply on your blog .
Benifits of search box
as per name it is clearly known that it will help to search specific content on your blog but its not last and least uses of search box .Some essentital benifits adding Custom search box widgets are below:
- Time consuming to search any content
- USer friendly
- Provide professional looks on your website
- Can be apply any where on your blog or website
- Stylish ,active,hover and focus effect.
- Auto adjust width.
- Pure Css no extra image.
How to add stylish search box on blogger blog and website ?
To add stylish search box on blogger blog and website just follow simple few steps:
Step-1: Go to your blogger dashboard and select your blog.
- Step-2: Select Layout option.
- Step-3: Select Add a gadget option.
- Step-4: Select HTML/JavaScript widget.
- Step-5: In the HTML/JavaScript widget paste code of the search box widget and save the widget.
Top 10 Stylish search box widge codes
Note 2: In all the below codes Replace https://learnmoretrick.com
with your blog address or replace it by your Blog URL..
Design -1: Dynamic/Extandable
<style> #wc-searchexpandbox1 { padding:10px; } #wc-searchexpandsubmit1 { border:1px solid #111111; background: #111111; padding:5px; color:#ffffff; font:14px verdana; } #wc-searchexpandinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; transition: width 2s; -webkit-transition: width 2s; /* Safari */ -o-transition: width 2s; /* Opera*/ -moz-transition: width 2s; /* firefox*/ width:65px; } #wc-searchexpandinput1:hover { width:180px; } </style> <div id='wc-searchexpand1'> <form name='input' action='https://learnmoretrick.com/search' method='get' id="wc-searchexpandbox1"> <input name='q' id='wc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchexpandsubmit1' type='submit' value='Search'/> </form> </div>Design -2: Elegant Green
<style> #wc-searchgreen1 { background: rgb(143,196,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */ border-radius:10px; width:280px; } #wc-searchgreenbox1 { padding:10px; } #wc-searchgreensubmit1 { border:1px solid green; background: green; padding:5px; color:#ffffff; font:14px verdana; } #wc-searchgreeninput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; width:178px; font:14px verdana; } </style> <div id='wc-searchgreen1'> <form action='https://learnmoretrick.com/search' method='get' id="wc-searchgreenbox1">
<input name='q' id='wc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchgreensubmit1' type='submit' value='Search'/> </form> </div>Design -3: Clean Search box
<style> #wc-searchsimplebox1 { padding:10px; width:280px; } #wc-searchsimplesubmit1 { border:1px solid orange; background: orange; padding:5px; color:#ffffff; font:14px verdana; } #wc-searchsimpleinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; width:170px; font:14px verdana; } </style> <div id='wc-searchsimple1'> <form name='input' action='https://learnmoretrick.com/search' method='get' id="wc-searchsimplebox1">
<input name='q' id='wc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchsimplesubmit1' type='submit' value='Search'/> </form> </div>Design -4: Dark Black
<style> #wc-searchblack1 { background: #222222; border-radius:10px; width:280px; } #wc-searchblackbox1 { padding:10px; } #wc-searchblacksubmit1 { border:1px solid #222222; background: #dc4523; padding:5px; color:#ffffff; font:14px verdana; } #wc-searchblackinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; width:178px; font:14px verdana; } </style> <div id='wc-searchblack1'> <form name="input" action="https://learnmoretrick.com/search" method="get" id="wc-searchblackbox1">
<input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchblacksubmit1' type='submit' value='Search'/> </form> </div>Design -5: Easy Blue
<style> #wc-searchblue1 { background: rgb(37,141,200); /* Old browsers */ background: -moz-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */ border-radius:10px; width:280px; } #wc-searchbluebox1 { padding:10px; } #wc-searchbluesubmit1 { border:1px solid orange; background: orange; padding:5px; color:#ffffff; font:14px verdana; } #wc-searchblueinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; width:178px; font:14px verdana; } </style> <div id='wc-searchblue1'> <form action='https://learnmoretrick.com/search' method='get' id="wc-searchbluebox1">
<input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='wc-searchbluesubmit1' type='submit' value='Search'/> </form> </div>Design -6:
<style type="text/css"> #hbz-searchbox { background-color: #F5F5F5; border: 1px solid #EDEDED; padding: 5px; border-radius: 10px; margin: 10px auto; min-width: 238px; max-width: 288px; } #hbz-input { background-color: #FEFEFE; border: medium none; font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif; margin-right: 2%; padding: 4%; box-shadow: 2px 1px 4px #999999 inset; border-radius: 9px; width: 60.33%; } #hbz-input:focus { outline: medium none; box-shadow: 1px 1px 4px #0D76BE inset; } #hbz-submit { background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat; border-radius: 9px; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif; padding: 4%; width: 28%; } #hbz-submit:hover { background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat; } </style> <form id="hbz-searchbox" action="/search" method="get"> <input type="text" id="hbz-input" name="q" placeholder="Type Here..." /> <input type="hidden" name="max-results" value="8" /> <input id="hbz-submit" type="submit" value="Search" /> </form></div>Design -7:
<style type="text/css">#hbz-searchbox {min-width: 250px;margin: 10px auto;border-radius: 3px;overflow: hidden;max-width: 300px;}#hbz-input {width: 59.2%;padding: 10.5px 4%;font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";border: none;background-color: #EEE;}#hbz-input:focus {outline: none;background-color: #FFF;box-shadow: 0 0 2px #333333 inset;}#hbz-submit {overflow: visible;position: relative;float: right;border: none;padding: 0;cursor: pointer;height: 40px;width: 32.8%;font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";color: #FFF;text-transform: uppercase;background-color: #D83C3C;}#hbz-submit::before {content: "";position: absolute;border-width: 8px;border-style: solid solid solid none;border-color: transparent #D83C3C;top: 12px;left: -6px;}#hbz-submit:focus,#hbz-submit:active {background-color: #C42F2F;outline: none;}#hbz-submit:focus::before,#hbz-submit:active::before {border-color: transparent #C42F2F;}#hbz-submit:hover {background-color: #E54040;}#hbz-submit:hover::before {border-color: transparent #E54040;}</style><form id="hbz-searchbox" action="/search" method="get"><input type="text" id="hbz-input" name="q" placeholder="Search..." /><input type="hidden" name="max-results" value="8" /><button id="hbz-submit" type="submit">Search</button></form></div>Design -8:
<style type="text/css"> #hbz-searchbox { background: transparent linear-gradient(#2C2C2C, #111); border-width: 1px; border-style: solid; border-color: #000; border-radius: 4px; padding: 10px; z-index: 1; display: block; margin: 10px auto; min-width: 228px; max-width: 278px; } #hbz-input, .hbz-submit { box-shadow: 0 2px #000; font-family: 'Cabin', helvetica, arial, sans-serif !important; margin: 0px; padding: 0px; } #hbz-input { background: linear-gradient(#333, #222); border: 1px solid #444; color: #888; display: block; float: left; font-size: 13px; height: 30px; padding-left: 4%; padding-right: 4%; width: 60.2%; border-radius: 3px 0px 0px 3px; } #hbz-input:focus { animation: glow 800ms ease-out infinite alternate; border-color: #393; color: #efe; outline: none; } .hbz-submit { background: linear-gradient(#333, #222); box-sizing: content-box; border: 1px solid #444; border-left-color: #000; color: #fff; display: block; font-size: 12px; height: 30px; line-height: 30px; position: relative; width: 30%; cursor: pointer; border-radius: 0px 3px 3px 0px; } .hbz-submit:hover, .hbz-submit:focus { background: linear-gradient(#393939, #292929); } .hbz-submit:hover, .hbz-submit:focus { color: #5f5; outline: none; } .hbz-submit:active { top: 1px; } @keyframes glow { 0% { border-color: #393; box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F; } 100% { border-color: #6f6; box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F; </style> <form id="hbz-searchbox" action="/search" method="get"> <input type="text" id="hbz-input" name="q" placeholder="Search..." /> <input type="hidden" name="max-results" value="8" /> <button class="hbz-submit" type="submit">Search</button> </form></div>Design -9:
<style type="text/css"> #hbz-searchbox { height: 40px; position: relative; min-width: 250px; max-width: 300px; margin: 10px auto; } .hbz-buttonwrap { border: none; width: 14%; height: 35px; display: block; position: absolute; top: 0; right: 0; background: #009bff; cursor: pointer; border-bottom: 5px solid #0276c1; } .hbz-buttonwrap:hover { border-bottom: 5px solid #bc490a; background: #d75813; } .hbz-submit { width: 35px; height: 35px; background: transparent; cursor: pointer; position: absolute; right: 50%; top: 50%; margin-top: -17.5px; margin-right: -17.5px; border: none; } .hbz-submit:after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; left: 10px; top: 9px; box-sizing: content-box; } .hbz-submit:before { content: ''; position: absolute; height: 8px; width: 2px; background: white; transform: rotate(-35deg); top: 19px; left: 21px; } #hbz-input { height: 32px; width: 82%; position: absolute; padding-left: 4%; border: none; outline: none; right: 14%; border-bottom: 5px solid #bbb; border-left: 1px solid #eaeaea; background-color: #fbfbfb; border-top: 1px solid #eaeaea; box-shadow: 1px 1px 2px #e9e4e4 inset; } #hbz-input:focus, #hbz-input:active { background-color: #fff; } </style> <form action="/search" id="hbz-searchbox" method="get"> <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span> <input type="text" name="q" id="hbz-input" placeholder="Type here ..." /> <input type="hidden" name="max-results" value="8" /> </form></div>Design -10:
<style type="text/css"> #hbz-searchbox { height: 35px; margin: 10px auto; position: relative; min-width: 250px; max-width: 300px; } .hbz-buttonwrap { border: none; width: 14%; height: 35px; display: block; position: absolute; top: 0; right: 0; background: #444; cursor: pointer; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .hbz-buttonwrap:hover { background: #1a1a1a; } .hbz-submit { width: 35px; height: 35px; background: transparent; cursor: pointer;position: absolute; right: 50%; top: 50%; margin-top: -17.5px; margin-right: -17.5px; border: none; } .hbz-submit:after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; left: 10px; top: 9px; box-sizing: content-box; } .hbz-submit:before { content: ''; position: absolute; height: 8px; width: 2px; background: white; transform: rotate(-35deg); top: 19px; left: 21px; } #hbz-input { height: 35px; width: 82%; padding: 0px; padding-left: 4%; border: none; outline: none; position: absolute; right: 14%; box-shadow: inset 0 2px 2px #080808; background-color: #444444; color: #fff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; transition: all 0.5s; } #hbz-input:hover, #hbz-input:focus { box-shadow: inset 1px 1px 10px #000; } </style> <form action="/search" id="hbz-searchbox" method="get"> <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span> <input type="text" name="q" id="hbz-input" placeholder="Search..." /> <input type="hidden" name="max-results" value="8" /> </form></div>Configuration: for design-6 to design-10
- Change the value="8" for total numbers of posts per page. Eg value="12".
Note: Make sure max-results value matches with your post limit on homepage.
0 Comments
Dear Viewers if you have any comment regards this post let me know.